<template>
	<view class="wineStorageRules">
		<n-loading></n-loading>
		<view class="rulesTit">
			<image src="../../static/svgIcon/rulesTit1.svg" mode=""></image>
			<view class="tit">存酒与高粱穗规则</view>
			<image src="../../static/svgIcon/rulesTit2.svg" mode=""></image>
		</view>
		<view class="rulesCont" v-if="rules">
			<view class="bigTit">{{rules.storage_liquor_rule.title}}</view>
			<view class="mrb24">
				<u-parse :html="rules.storage_liquor_rule.val" class="smallTit"></u-parse>
				<!-- <view class="smallTit">1、存酒</view>
				<view class="contInfo">平台赠送酒卡不支持存酒</view>
				<view class="contInfo">自购或好友赠送酒卡支持存酒</view>
				<view class="contInfo">酒卡默认30天无任何操作直接成为冻结状态，产生高粱穗</view>
				<view class="smallTit">2、酒卡冻结</view>
				<view class="contInfo">酒卡冻结状态下，用户可随时取消冻结状态，其当周生产的高粱穗清零，且该酒卡无法再次冻结产生高粱穗</view>
				<view class="contInfo">酒卡冻结所产生的高粱穗，必须由用户每周自主领取，否则将自动失效</view>
				<view class="contInfo">每张酒卡最长冻结时长为24个周，累计最多支持领取高粱穗24次</view>
				<view class="contInfo">不同时间冻结的酒卡，其收益依照冻结开始时间计算，次日产生高粱穗</view>
				<view class="contInfo">酒卡冻结状态下，不支持退卡、不支持提货，需解除冻结后方可退卡与提货</view> -->
			</view>
			<view class="bigTit">{{rules.storage_income_ratio.title}}</view>
			<view class="mrb24">
				<u-parse :html="rules.storage_income_ratio.val" class="smallTit"></u-parse>
				<!-- <view class="smallTit">根据用户级别，酒卡高粱穗产生的收益比例不同</view>
				<view class="contInfo">白银阶段 酒卡收益比例为周收益2%</view>
				<view class="contInfo">黄金阶段 酒卡收益比例为周收益3%</view>
				<view class="contInfo">钻石阶段 酒卡收益比例为周收益5%</view>
				<view class="contInfo">至尊阶段 酒卡收益比例为周收益6%</view> -->
			</view>
			<view class="bigTit">{{rules.storage_liquor_formula.title}}</view>
			<view class="mrb24">
				<u-parse :html="rules.storage_liquor_formula.val" class="smallTit"></u-parse>
				<!-- <view class="smallTit">购买酒卡的实付金额 x 用户等级收益比率 (白银 2%)  x  7  =  当周可领取高粱穗</view>
				<view class="smallTit">注意事项：最长周期为24个周期，不依照日历进行，其实际可产生收益天数为：168天</view>
				<view class="smallTit">范例： 实付金额168元  x  白银级2%  x  7  x   24   = 564 个高粱穗</view>
				<view class="smallTit">根据高粱穗换算规则：10高粱穗可兑换1人民币(回收制)，则合计产生高粱穗可兑换数额为564/10=56.4元</view>
				<view class="smallTit">收益折补：则该用户在完成一瓶酒卡的存储周期后，实际付款168元，能够获得高粱穗收益56元，其实际付出成本为112元。</view>
				<view class="smallTit">依照收益率计算，该用户存酒成本为168元，而后获得收益为56元，其实际周期收益率为33%，随着等级上升，其收益率分别为：</view>
				<view class="contInfo">白银级：33% 一轮周期</view>
				<view class="contInfo">黄金级：50% 一轮周期</view>
				<view class="contInfo">钻石级：84% 一轮周期</view>
				<view class="contInfo">至尊级：100% 一轮周期</view>
				<view class="smallTit">依照收益率计算，存酒收益最高能够达到100%，酒卡冻结周期结束后，解锁酒卡，白酒同样支持取出现货，因此，相当于用户最高可免费喝酒。</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				rules:null,
			}
		},
		onLoad: function (option) {
			this.getRules();
		},
		methods:{
			getRules(){
				var _this = this;
				this.apiget('/mall/storage-liquor/rule', {}).then(res => {
					if (res.data.status == 200) {
						this.rules = res.data.data;
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.wineStorageRules{
		min-height: 100%;
		padding: 0 32rpx 36rpx;
		background: #CA6100;
		
		.rulesTit{
			display: flex;
			padding: 40rpx 0 24rpx;
			align-items: center;
			justify-content: center;
			
			image{
				display: inline-block;
				width: 45rpx;
				height: 32rpx;
			}
			
			.tit{
				margin: 0 16rpx;
				font-weight: bold;
				font-size: 36rpx;
				line-height: 52rpx;
				color: #FFFFFF;
			}
		}
		
		.rulesCont{
			padding: 40rpx 24rpx;
			background: #FF8832;
			border-radius: 16rpx;
			color: #FFFFFF;
			
			.bigTit{
				position: relative;
				height: 64rpx;
				padding-left: 16rpx;
				font-size: 32rpx;
				line-height: 64rpx;
			}
			.bigTit:after{
				position: absolute;
				content: '';
				width: 40rpx;
				height: 40rpx;
				top: 50%;
				left: 0;
				margin-top: -20rpx;
				background: rgba(255, 255, 255, 0.24);
				border-radius: 50%;
			}
			
			.mrb24{
				padding-bottom: 24rpx;
			}
			
			.smallTit{
				margin-top: 8rpx;
				font-size: 24rpx;
				line-height: 40rpx;
			}
			
			.contInfo{
				position: relative;
				margin-top: 8rpx;
				padding-left: 24rpx;
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.contInfo:after{
				position: absolute;
				content: '';
				width: 16rpx;
				height: 16rpx;
				top: 12rpx;
				left: 0;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}
</style>
